<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            div{
                  padding: 40px;
                  border: 2px solid #000;
            }
            .box{
                  background: yellowgreen;
            }
      </style>
</head>
<body>
      <div>
            <div class="pox">
                  <div>
                        <div></div>
                        <div></div>
                        <div class="box"></div>
                        <div></div>
                        <div></div>
                  </div>
            </div>
      </div>

      <script src="./jquery.js"></script>
      <script>
            // 父级选择;
            // parent 方法会找到父级并返回父级;
            // $(".box").parent() 
            // // 直接使用 parent() 的返回值;
            // .css({
            //       borderColor : "red"
            // })
            
            // 所有符合规则的父级;
            // 批量查找的元素 , 我们最好加上选择器限制,如果你不加选择器那么会默认传入一个通配选择器;

            // $(".box").parents("div") 
            // .css({
            //       borderColor : "red"
            // })

            // 选中两者之间的所有元素;
            // $(".box").parentsUntil("html")
            // .css({
            //       borderColor : "red"
            // })

            // 子集  : 

            // children(); >
            
            // 后代 :

            // find();
            
            // 只有子集被选中;
            // $(".pox").children()
            // .css({
            //       color : "red"
            // })
            // find 必须传递选择符;
            // $(".pox").find("div")
            // .css({
            //       color : "red"
            // })

            // 兄弟选择器: 
            // prev 上一个
            // next 下一个
            // siblings 兄弟姐妹;
            
            // $(".box").prev()
            // .css({
            //       backgroundColor : "orangered"
            // })

            // $(".box").prevAll()
            // .css({
            //       backgroundColor : "orangered"
            // })

            // $(".box").prevUntil("div:eq(3)")
            // .css({
            //       backgroundColor : "orangered"
            // })

            $(".box").siblings()
            .css({
                  backgroundColor : "orangered"
            })

      </script>
</body>
</html>